<!DOCTYPE html> 
<html lang="en">
  <head>
    <title>Minesweeper</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="/static/minesweeper.css" rel="stylesheet" type="text/css">
    <style>
 
     /* Play Now Button */

     .button {
   	width: 150px;
    	height: 30px;
    	border: 1px solid orange;
    	background: red;
    	padding: 2px 8px;
    	font-size: 16px;
    	font-family: Veranda;
    	font-style: bold;
	}
    .button:hover {
    	border: none;
    	background : blue;
    	padding: 2px 8px;
	}
    label {
    	display: block;
    	width: 150px;
    	float: left;
    	margin: 2px 4px 6px 4px;
    	text-align: right;
	}
	br { clear: left; }
    </style>
  </head> 
  <body class="home"> 
    <div class="wrap"> 
  <header>
  <section id="banner">
  <p><br><img src="http://i56.tinypic.com/11lpfna.png" align="right"></br></p>
	    <nav>  
	      <ul> 
		<li class="home"><a href="/home.html">Home</a></li> 
		<li class="game"><a href="/game.html"><span>Game</span></a></li>
          	<li class="highscore"><a href="/highscore.html"><span>High Scores</span></a></li>
          	<li class="team"><a href="/team.html"><span>Team</span></a></li>
	      </ul> 
	    </nav>
   </section>
	 </header> 
   <section id="goal"> 
      <br><br><br><br><br><br>
      <p><center><em>Minesweeper is a deceptively simple test of memory and reasoning.<br> The goal: find the empty squares and avoid the mines. Sounds easy, right?</em></p><br></center>
      <p><em>How to play</em><br>
         <ol>
           <li>Uncover a mine, and the game ends.</li>
           <li>Uncover an empty square, and you keep playing.</li>
           <li>Uncover a number, and it tells you how many mines lay hidden in the eight surrounding squares—information you use to deduce which nearby squares are safe to click.</li><br>
      <p><em>Hints and tips:</em><br> Mark the mines. If you suspect a square conceals a mine, right-click it. This puts a flag on the square. (If you're not sure, right-click again to make it a question mark.) Study the patterns. If three squares in a row display 2-3-2, then you know three mines are probably lined up beside that row. If a square says 8, every surrounding square is mined. Explore the unexplored. Not sure where to click next? Try clearing some unexplored territory. You're better off clicking in the middle of unmarked squares than in an area you suspect is mined. 
      </p><br>
    <form action="/game.html">
     <p><em> Select Difficulty Level: </em></p>
     <input type="radio" name="level" value="easy"/> Easy <br>
     <input type="radio" name="level" value="medium"/> Medium <br>
     <input type="radio" name="level" value="hard"/> Hard <br><br>
    <input type="submit" value="Play Now" class="button" />
    </form>
    </section>
    </div>
  </body> 
</html>

